<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>荣耀CG动画 - 赛事中心</title>
  <link rel="stylesheet" href="css/events.css">
  <script src="js/events.js" defer></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="header">
    <div class="header-container">
      <div class="logo">
        <a href="index.html">
          <img src="images/SLogo.png" alt="荣耀CG动画">
        </a>
      </div>
      <div class="search-box">
        <input type="text" placeholder="搜索赛事...">
        <button class="search-btn">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- 视频轮播区域 -->
  <div class="video-banner">
    <video id="banner-video" autoplay loop playsinline>
      <source src="videos/tou.mp4" type="video/mp4">
    </video>
  </div>

  <!-- 游戏分类模块 -->
<section class="game-category">
  <div class="category-container">
    <h2 class="category-title">热门游戏</h2>
    <div class="game-list">
      <div class="game-item active" data-game="all" 
           data-info='{"name":"全部游戏","logo":"all-game.png","description":"展示所有热门游戏的赛事信息，包括王者荣耀、和平精英等热门游戏的最新比赛和精彩瞬间。","type":"综合游戏","release":"-", "video":"videos/all-game.mp4"}'>
        <div class="game-icon">
          <img src="images/all-game.png" alt="全部游戏图标">
        </div>
        <span>全部游戏</span>
      </div>
      <div class="game-item" data-game="wzry" 
           data-info='{"name":"王者荣耀","logo":"logo.png","description":"王者荣耀是一款5v5多人在线战斗竞技游戏，由腾讯游戏开发。游戏以推塔为核心，玩家选择不同英雄进行对战，通过策略和操作赢得胜利。","type":"MOBA","release":"2015年11月26日", "video":"videos/wzry.mp4"}'>
        <div class="game-icon">
          <img src="images/logo.png" alt="王者荣耀图标">
        </div>
        <span>王者荣耀</span>
      </div>
      <div class="game-item" data-game="hpej" 
           data-info='{"name":"和平精英","logo":"logo2.png","description":"和平精英是一款战术竞技类游戏，玩家在一个荒岛上与其他玩家竞争，通过收集装备、战术策略和射击技巧成为最后的幸存者。","type":"战术竞技","release":"2019年5月8日", "video":"videos/hpej.mp4"}'>
        <div class="game-icon">
          <img src="images/logo2.png" alt="和平精英图标">
        </div>
        <span>和平精英</span>
      </div>
      <div class="game-item" data-game="jcc" 
           data-info='{"name":"金铲铲之战","logo":"logo3.png","description":"金铲铲之战是一款自走棋策略游戏，基于云顶之弈玩法开发。玩家通过收集英雄、装备和阵容搭配，与其他玩家进行策略对抗。","type":"自走棋","release":"2021年8月26日", "video":"videos/jcc.mp4"}'>
        <div class="game-icon">
          <img src="images/logo3.png" alt="金铲铲之战图标">
        </div>
        <span>金铲铲之战</span>
      </div>
      <div class="game-item" data-game="lol" 
           data-info='{"name":"英雄联盟","logo":"logo4.png","description":"英雄联盟是一款经典的5v5多人在线战斗竞技游戏，拥有丰富的英雄角色和深度的策略玩法，是全球最受欢迎的电竞游戏之一。","type":"MOBA","release":"2009年10月27日", "video":"videos/lol.mp4"}'>
        <div class="game-icon">
          <img src="images/logo4.png" alt="英雄联盟图标">
        </div>
        <span>英雄联盟</span>
      </div>
      <div class="game-item" data-game="ewc" 
           data-info='{"name":"世界冠军杯","logo":"logo5.png","description":"世界冠军杯是多个热门游戏的全球性赛事，汇聚世界各地的顶尖战队，为玩家带来最高水平的电竞赛事体验。","type":"综合赛事","release":"-", "video":"videos/ewc.mp4"}'>
        <div class="game-icon">
          <img src="images/logo5.png" alt="世界冠军杯图标">
        </div>
        <span>世界冠军杯</span>
      </div>
    </div>
  </div>
</section>
  <!-- 底部导航栏 -->
  <nav class="bottom-nav">
    <a href="index.html" class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="events.html" class="nav-item active">
      <i class="fa fa-trophy"></i>
      <span>赛事</span>
    </a>
    <a href="cg.html" class="nav-item">
      <i class="fa fa-film"></i>
      <span>CG动画</span>
    </a>
    <a href="profile.html" class="nav-item">
      <i class="fa fa-user"></i>
      <span>个人中心</span>
    </a>
  </nav>

  <!-- 主内容区 -->
  <main class="main-content">
    <!-- 正在直播 -->
    <section class="live-section">
      <h2 class="section-title">正在直播</h2>
      <div class="live-container">
        <div class="live-item">
          <div class="live-thumb">
            <img src="images/live1.png" alt="王者荣耀职业联赛">
            <div class="live-badge">
              <i class="fa fa-circle"></i> 直播中
            </div>
            <div class="live-play">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="viewer-count">15.2万</span>
          </div>
          <div class="live-info">
            <h3>王者荣耀职业联赛 - 半决赛</h3>
            <div class="live-teams">
              <div class="team">
                <img src="images/team1.png" alt="成都AG超玩会">
                <span>成都AG超玩会</span>
              </div>
              <div class="score">2:1</div>
              <div class="team">
                
                <img src="images/team2.png" alt="重庆狼队">
                <span>重庆狼队</span>
              </div>
            </div>
          </div>
        </div>
        <div class="live-item">
          <div class="live-thumb">
            <img src="images/live2.png" alt="和平精英全球总决赛">
            <div class="live-badge">
              <i class="fa fa-circle"></i> 直播中
            </div>
            <div class="live-play">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="viewer-count">11.8万</span>
          </div>
          <div class="live-info">
            <h3>和平精英全球总决赛 - 小组赛</h3>
            <div class="live-teams">
              <div class="team">
                <img src="images/team3.png" alt="LGD">
                <span>LGD</span>
              </div>
              <div class="score">进行中</div>
              <div class="team">
              
                <img src="images/team1.png" alt="AG">
                  <span>AG</span>
              </div>
            </div>
          </div>
        </div>
        <div class="live-item">
          <div class="live-thumb">
            <img src="images/live3.png" alt="英雄联盟冠军赛">
            <div class="live-badge">
              <i class="fa fa-circle"></i> 直播中
            </div>
            <div class="live-play">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="viewer-count">8.7万</span>
          </div>
          <div class="live-info">
            <h3>英雄联盟冠军赛 - 四分之一决赛</h3>
            <div class="live-teams">
              <div class="team">
                <img src="images/team5.png" alt="LGD">
                <span>LGD</span>
              </div>
              <div class="score">1:0</div>
              <div class="team">
                
                <img src="images/team6.png" alt="WE">
                <span>WE</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

   <!-- 即将开始 -->
<section class="upcoming-section">
  <h2 class="section-title">即将开始</h2>
  <div class="upcoming-container">
    <div class="upcoming-item">
      <div class="upcoming-time">
        <span class="date">今天 20:00</span>
        <span class="countdown">
          <span class="hours">00</span>:
          <span class="minutes">45</span>:
          <span class="seconds">12</span>
        </span>
      </div>
      <div class="upcoming-match">
        <div class="match-teams">
          <div class="team">
            <img src="images/team1.png" alt="成都AG超玩会">
            <span>成都AG超玩会</span>
          </div>
          <div class="vs">VS</div>
          <div class="team">
            
            <img src="images/team2.png" alt="重庆狼队">
            <span>重庆狼队</span>
          </div>
        </div>
        <div class="match-info">
          <span class="tournament">王者荣耀职业联赛 - 决赛</span>
          <span class="game">王者荣耀</span>
        </div>
      </div>
    </div>
    <div class="upcoming-item">
      <div class="upcoming-time">
        <span class="date">明天 15:30</span>
        <span class="countdown">
          <span class="hours">23</span>:
          <span class="minutes">10</span>:
          <span class="seconds">30</span>
        </span>
      </div>
      <div class="upcoming-match">
        <div class="match-teams">
          <div class="team">
            <img src="images/team3.png" alt="LGD">
            <span>LGD</span>
          </div>
          <div class="vs">VS</div>
          <div class="team">
          
            <img src="images/team1.png" alt="AG">
            <span>AG</span>
          </div>
        </div>
        <div class="match-info">
          <span class="tournament">和平精英全球总决赛 - 半决赛</span>
          <span class="game">和平精英</span>
        </div>
      </div>
    </div>
    <div class="upcoming-item">
      <div class="upcoming-time">
        <span class="date">6月17日 16:00</span>
        <span class="countdown">
          <span class="hours">40</span>:
          <span class="minutes">35</span>:
          <span class="seconds">45</span>
        </span>
      </div>
      <div class="upcoming-match">
        <div class="match-teams">
          <div class="team">
            <img src="images/team5.png" alt="LGD">
            <span>LGD</span>
          </div>
          <div class="vs">VS</div>
          <div class="team">
          
            <img src="images/team6.png" alt="WE">
             <span>WE</span>
          </div>
        </div>
        <div class="match-info">
          <span class="tournament">金铲铲之战大师赛 - 总决赛</span>
          <span class="game">金铲铲之战</span>
        </div>
      </div>
    </div>
  </div>
</section>

    <!-- 精彩回放 -->
    <section class="highlights-section">
      <h2 class="section-title">精彩回放</h2>
      <div class="highlights-container">
        <div class="highlight-item">
          <div class="highlight-thumb" data-video="videos/cg1.mp4">
            <img src="images/logo.png" alt="精彩团战">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">04:25</span>
          </div>
          <div class="highlight-info">
            <h3>王者荣耀 - 总决赛精彩团战</h3>
            <div class="highlight-meta">
              <span><i class="fa fa-eye"></i> 28.5万</span>
              <span><i class="fa fa-calendar"></i> 昨天</span>
            </div>
          </div>
        </div>
        <div class="highlight-item">
          <div class="highlight-thumb" data-video="videos/cg2.mp4">
            <img src="images/logo2.png" alt="极限操作">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">03:12</span>
          </div>
          <div class="highlight-info">
            <h3>和平精英 - 极限操作集锦</h3>
            <div class="highlight-meta">
              <span><i class="fa fa-eye"></i> 22.7万</span>
              <span><i class="fa fa-calendar"></i> 3天前</span>
            </div>
          </div>
        </div>
        <div class="highlight-item">
          <div class="highlight-thumb" data-video="videos/cg3.mp4">
            <img src="images/logo3.png" alt="翻盘时刻">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">05:40</span>
          </div>
          <div class="highlight-info">
            <h3>金铲铲之战 - 绝地翻盘</h3>
            <div class="highlight-meta">
              <span><i class="fa fa-eye"></i> 18.3万</span>
              <span><i class="fa fa-calendar"></i> 1周前</span>
            </div>
          </div>
        </div>
        <div class="highlight-item">
          <div class="highlight-thumb" data-video="videos/cg6.mp4">
            <img src="images/logo4.png" alt="精彩操作">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">06:15</span>
          </div>
          <div class="highlight-info">
            <h3>英雄联盟 - 五杀精彩瞬间</h3>
            <div class="highlight-meta">
              <span><i class="fa fa-eye"></i> 16.5万</span>
              <span><i class="fa fa-calendar"></i> 2周前</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 视频播放模态框 -->
  <div class="modal video-modal">
    <div class="modal-content video-content">
      <div class="modal-header">
        <h2 id="video-title">视频播放</h2>
        <button class="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <video id="video-player" controls>
          <source src="" type="video/mp4">
          您的浏览器不支持HTML5视频播放。
        </video>
      </div>
    </div>
  </div>
  
   <!-- 游戏信息悬浮框 -->
  <div class="game-info-popup">
    <div class="popup-content">
      <div class="popup-header">
        <h3 class="popup-title"></h3>
        <button class="close-popup">&times;</button>
      </div>
      <div class="popup-body">
        <div class="game-logo-container">
          <i class="game-logo"></i>
        </div>
        <div class="game-description"></div>
        <div class="game-meta">
          <div class="game-type"><span class="meta-label">游戏类型：</span><span class="meta-value"></span></div>
          <div class="game-release"><span class="meta-label">发布时间：</span><span class="meta-value"></span></div>
        </div>
      </div>
      <div class="popup-footer">
        <button class="play-game-btn">立即游戏</button>
      </div>
    </div>
  </div>
  
  <!-- 游戏视频播放框 (修改位置和大小) -->
  <div class="game-video-player">
    <div class="video-player-content">
      <video id="game-video" controls>
        <source src="" type="video/mp4">
        您的浏览器不支持HTML5视频播放。
      </video>
      <button class="close-video-player">&times;</button>
    </div>
  </div>
  
  <!-- 遮罩层 --> 
  <div class="popup-overlay"></div>
  
  <!-- 通知提示 -->
  <div class="notification-container"></div>
</body>
</html>
